<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta auther />
        <title>俄罗斯方块</title>
        <style>
            .map{
                margin: 10px;
            }
            table{
                border: 1px solid #C1C1C1;
            }
            td{
               width: 20px;
               height: 20px;
               border: 1px solid #c1c1c1;
            }
            .active{
                background-color: #ff0000;
            }
            .over{
                background-color: #e7ffca;
            }
        </style>
    </head>

<body>
    <div id="content">
        <div class="tablemap"></div>
        <button class="changechunk">变换</button>
        <button class="moveleft">左移</button>
        <button class="moveright">右移</button>
        <button class="movebottom">加速</button>
        <button class="stopGame">停止</button>
        <button class="startgame">开始游戏</button>
        <button>结束游戏</button>
    </div>
    <script src="./elsfk.js"></script>
    <script type="text/javascript">
        //初始化地图
        const tablemap = new Createmap('.tablemap', [12, 14])
        
        var movebottom = document.querySelector('.movebottom')
        movebottom.addEventListener('click', () => {
            tablemap.moveBottom()
        })
        
        var moveright = document.querySelector('.moveright')
        moveright.addEventListener('click', () => {
            tablemap.moveRight()
        })
        
        var moveleft = document.querySelector('.moveleft')
        moveleft.addEventListener('click', () => {
            tablemap.moveLeft()
        })
        
        var changechunk = document.querySelector('.changechunk')
        changechunk.addEventListener('click', () => {
            tablemap.changeChunk()
        })
        
        var startgame = document.querySelector('.startgame')
        startgame.addEventListener('click', () => {
            startGame()
        })
        
        
        
        
        var t
        var stopGame = document.querySelector('.stopGame')
        stopGame.addEventListener('click', () => {
            clearInterval(t)
        })
        function startGame() {
            // if(t) {
            //     clearInterval(t)
            // }
            t = setInterval(() => {
                // tablemap.rabdomChunkNum();
                tablemap.moveBottom();
            },500)
        }
        

        // tabmap.createchunk()
        // new Chunk('.tablemap', [12, 14])
        // tabmap.data.map((item) => {
        //     item.map((val) => {
        //         if(val.status === 1) {
                    
        //         }
        //     })
        // })
    </script>
</body>
</html>
